<template>
  <component
    :selectInfo="props.selectInfo"
    :is="getcabinetItem"
    :width="props.info.width"
    :indexs="props.indexs"
    :height="props.info.height"
    :childShow="props.childShow"
    :info="props.info"
    :childId="props.childId"
    :AuxiliaryId="props.AuxiliaryId"
    @emitChildItemDraggable="emitChildItemDraggable"
    @emitChildItemDraggableStyle="emitChildItemDraggableStyle"
    @emitShowcaseDraggable="emitShowcaseDraggable"
    @emitShowcaseDraggableStyle="emitShowcaseDraggableStyle"
  ></component>
</template>

<script setup lang="ts">
import style1 from './style/style1/index.vue';
import style2 from './style/style2/index.vue';
import style3 from './style/style3/index.vue';
import style4 from './style/style4/index.vue';
import style5 from './style/style5/index.vue';
import free2Style1 from './style2/style1/index.vue';
import free2Style2 from './style2/style2/index.vue';
import free2Style3 from './style2/style3/index.vue';
import free3Style1 from './style3/style1/index.vue';
import free3Style2 from './style3/style2/index.vue';
import free4Style1 from './style4/style1/index.vue';
import free4Style2 from './style4/style2/index.vue';
import free4Style3 from './style4/style3/index.vue';
import free4Style4 from './style4/style4/index.vue';
import free4Style5 from './style4/style5/index.vue';

import free3Style3 from './style3/style3/index.vue';
import free3Style4 from './style3/style4/index.vue';
import free3Style5 from './style3/style5/index.vue';
import free3Style6 from './style3/style6/index.vue';

import free5Style1 from './style5/style1/index.vue';
import free5Style2 from './style5/style2/index.vue';
import free5Style3 from './style5/style3/index.vue';
import free5Style4 from './style5/style4/index.vue';

import free6Style1 from './style6/style1/index.vue';
import free6Style2 from './style6/style2/index.vue';
import free6Style3 from './style6/style3/index.vue';
import free6Style4 from './style6/style4/index.vue';
import free7Style1 from './style7/style1/index.vue';
import free7Style2 from './style7/style2/index.vue';
import free8Style1 from './style8/style1/index.vue';
import free8Style2 from './style8/style2/index.vue';
import free8Style3 from './style8/style3/index.vue';
import free8Style4 from './style8/style4/index.vue';

import free9Style1 from './style9/style1/index.vue';
import free9Style2 from './style9/style2/index.vue';

import free11Style1 from './style11/style1/index.vue';
import free11Style2 from './style11/style2/index.vue';
import free11Style3 from './style11/style3/index.vue';
import free10Style1 from './style10/style1/index.vue';
import free10Style2 from './style10/style2/index.vue';
import free10Style3 from './style10/style3/index.vue';
import free12Style1 from './style12/style1/index.vue';
import free12Style2 from './style12/style2/index.vue';
import free13Style1 from './style13/style1/index.vue';
import free13Style2 from './style13/style2/index.vue';
import free13Style3 from './style13/style3/index.vue';
import free13Style4 from './style13/style4/index.vue';
import free14Style1 from './style14/style1/index.vue';
import free14Style2 from './style14/style2/index.vue';
import free15Style1 from './style15/style1/index.vue';
import free15Style2 from './style15/style2/index.vue';
import free16Style1 from './style16/style1/index.vue';
import free16Style2 from './style16/style2/index.vue';
import free17Style1 from './style17/style1/index.vue';
import draggableShowcase from '@/freeComponents/Showcase/draggableShowcase.vue'; //展柜
import { DraggableContainer } from 'vue3-draggable-resizable';
import draggableChildItem from './draggableChildItem.vue';
import FlotMenu from '@/components/flotMenu/OutlineMenu.vue';
import ContextMenu from '@imengyu/vue3-context-menu';
import { getDraggableNumber, getExhibitsHeightRest, getdisabledY } from '@/utils/getRemComputed';
import { ref, reactive, watch, nextTick, computed } from 'vue';
import { exbitMenuShow, exbitListMenuShow } from '@/hooks/menuHooks';
import { useProjectStore } from '@/store';
import { publicUrls } from '@/utils/minxin';

const emit = defineEmits([
  'emitChildItemDraggable',
  'emitChildItemDraggableStyle',
  'emitShowcaseDraggable',
  'emitShowcaseDraggableStyle',
]);
const store = useProjectStore();
const contextMenuTrigger = ref(); //列表盒子dom
const parentLock = ref(true);
const childShow = ref(true);
const draggableResizable = ref(); //父级拖拽盒子ref
const timer = ref();

const props = defineProps({
  childShow: {
    type: Boolean,
  },
  selectInfo: {
    type: Object,
  },
  width: {
    type: Number || String,
  },
  height: {
    type: Number || String,
  },
  indexs: {
    type: Number,
  },
  info: {
    type: Object,
  },
  childId: {
    type: Number,
  },
  AuxiliaryId: {
    type: Number,
  },
});

const emitChildItemDraggable = (draggingInfo: any, childIndex: number) => {
  emit('emitChildItemDraggable', draggingInfo, childIndex); //分组传递当前展品图距离相对父元素的xy偏移量变化
};
const emitChildItemDraggableStyle = (draggingInfo: any, childIndex: number) => {
  emit('emitChildItemDraggableStyle', draggingInfo, childIndex); //分组设置当前展品图距离相对父元素的宽高变化
};
const emitShowcaseDraggable = (draggingInfo: any) => {
  emit('emitShowcaseDraggable', draggingInfo); //传递当前展柜图距离相对父元素的xy偏移量变化
};
const emitShowcaseDraggableStyle = (draggingInfo: any) => {
  emit('emitShowcaseDraggableStyle', draggingInfo); //传递当前展柜距离相对父元素的宽高变化
};

const getcabinetItem = computed(() => {
  //获取展柜动态组件
  switch (props.selectInfo.id) {
    case 17001:
      return style1;
      break;
    case 17002:
      return style2;
      break;
    case 17003:
      return style3;
      break;
    case 17004:
      return style4;
      break;
    case 17005:
      return style5;
      break;
    case 27001:
      return free2Style1;
      break;
    case 27002:
      return free2Style2;
      break;
    case 27003:
      return free2Style3;
      break;
    case 37001:
      return free3Style1;
      break;
    case 47001:
      return free4Style1;
      break;
    case 47002:
      return free4Style2;
      break;
    case 47003:
      return free4Style3;
      break;
    case 47004:
      return free4Style4;
      break;
    case 47005:
      return free4Style5;
      break;
    case 37002:
      return free3Style2;
      break;
    case 37003:
      return free3Style3;
      break;
    case 37004:
      return free3Style4;
      break;
    case 37005:
      return free3Style5;
      break;
    case 37006:
      return free3Style6;
      break;
    case 57001:
      return free5Style1;
      break;
    case 57002:
      return free5Style2;
      break;
    case 57003:
      return free5Style3;
      break;
    case 57004:
      return free5Style4;
      break;
    case 67001:
      return free6Style1;
      break;
    case 67002:
      return free6Style2;
      break;
    case 67003:
      return free6Style3;
      break;
    case 67004:
      return free6Style4;
      break;
    case 77001:
      return free7Style1;
      break;
    case 77002:
      return free7Style2;
      break;
    case 87001:
      return free8Style1;
      break;
    case 87002:
      return free8Style2;
      break;
    case 87003:
      return free8Style3;
      break; 
    case 87004:
      return free8Style4;
      break;
    case 97001:
      return free9Style1;
      break;
    case 97002:
      return free9Style2;
      break;
    case 117001:
      return free11Style1;
      break;
    case 117002:
      return free11Style2;
      break;
    case 117003:
      return free11Style3;
    case 107001:
      return free10Style1;
      break;
    case 107002:
      return free10Style2;
      break;
    case 107003:
      return free10Style3;
      break;
    case 127001:
      return free12Style1;
      break;
    case 127002:
      return free12Style2;
      break;
    case 137001:
      return free13Style1;
      break;
    case 137002:
      return free13Style2;
      break;
    case 137003:
      return free13Style3;
      break;
    case 137004:
      return free13Style4;
      break;
    case 147001:
      return free14Style1;
      break;
    case 147002:
      return free14Style2;
      break;
    case 157001:
      return free15Style1;
      break;
    case 157002:
      return free15Style2;
      break;
    case 167001:
      return free16Style1;
      break;
    case 167002:
      return free16Style2;
      break;
    case 177001:
      return free17Style1;
      break;
    default:
      return style1;
      break;
  }
});

// emitChildItemDraggable
// emitChildItemDraggableStyle
const handleMouseDown = (event) => {
  event.stopPropagation();
};
const preventDefaultDrag = (event) => {
  event.stopPropagation();
};

// watch(
//   () => props.info.width,
//   () => {
//     childShow.value = false;
//     nextTick(() => {
//       childShow.value = true;
//     });
//   },
//   { deep: true },
// );
// watch(
//   () => props.info.height,
//   () => {
//     childShow.value = false;
//     nextTick(() => {
//       childShow.value = true;
//     });
//   },
//   { deep: true },
// );

//
</script>

<style lang="less" scoped>
.exhibits-content {
  position: relative;
  display: flex;
  z-index: 999;
  padding: 10px;
}

.active {
  :deep(.flot-menu) {
    display: flex;
  }
}
:deep(.active) {
  z-index: 999;
}
:deep(.vdr-handle) {
  z-index: 66;
}
</style>
